<template>
  <el-form>
    <template v-for="(item, index) in details.columns">
      <el-form-item :label="item.title + details.titleSuffix" :key="index">
        <template v-if="item.type === 'text'">
          <span>{{ item.value }}</span>
        </template>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import _ from "lodash";
import * as request from "@/axios/axios";
export default {
  name: "details_index",
  props: {
    RHDetails: {}
  },
  data() {
    return {
      column: {
        fieId: "",
        title: "",
        type: "text",
        value: "",
        head: false, //是否标题
        formatter: null,
        formatterValues: {}
      },
      details: {
        titleSuffix: "：",
        columns: [],
        url: "",
        params: {},
        data: {}
      }
    };
  },
  methods: {
    /**
     * 初始化数据
     */
    initializeDetails() {
      this.details = _.defaultsDeep(this.RHDetails, this.details);
      if (_.isEmpty(this.details.url) && this.details.data.length <= 0) {
        return;
      }
      //初始化数据
      if (!_.isEmpty(this.details.url)) {
        const _this = this;
        request.get(this.details.url, this.details.params).then(response => {
          _this.details.data = response.entity;
        });
      }
      //初始化列
      let column = this.RHDetails.columns;
      if (column != null && column.length > 0) {
        for (let i = 0; i < column.length; i++) {
          column[i] = _.defaultsDeep(column[i], this.column);
          //格式化初始值
          if (column[i].formatter != null) {
            column[i].value = column[i].formatter(
              this.RHDetails.data,
              this.RHDetails.params
            );
          } else if (
            column[i].formatterValues != null &&
            _.keys(column[i].formatterValues).length > 0
          ) {
            column[i].value =
              column[i].formatterValues[this.details.data[column[i].fieId]];
          } else {
            column[i].value = this.details.data[column[i].fieId];
          }
        }
        this.RHDetails.columns = column;
      }
      this.$forceUpdate();
    }
  },
  watch: {
    RHDetails: {
      handler(newV, oldV) {
        this.RHDetails = newV;
        this.initializeDetails();
      },
      deep: true
    }
  },
  mounted() {
    this.initializeDetails();
  }
};
</script>

<style scoped></style>
